<template>
	<view class="content">
		<u-navbar placeholder @leftClick="back" bgColor="#FC2530" titleStyle="color:white;" title="门票预约"
			leftIconColor="#fff">
		</u-navbar>
		<view>
			<view class="bg">
				<view class="ticket">
					<view class="list">
						<view class="list_item">
							<view class="item_body">
								<view class="body_left">
									<u-image :src="scenicDetails.ticketImg|photoPrefix" radius="10px" width="280rpx"
										height="225rpx" :fade="true" duration="450"></u-image>
								</view>
								<view class="body_right">
									<view>
										<u-text size="38rpx" :text="scenicDetails.ticketName" :lines="1"></u-text>
										<view>
											<!-- style="display: inline-block;" -->
											<u-tag v-for="items in scenicDetails.ticketTag"
												style="display: inline-block;margin-right: 10rpx;" plainFill plain
												shape="circle" :text="items" size="mini" type="primary"></u-tag>
										</view>
										<!-- <u-text :lines="1" :text="item.scenicType"></u-text> -->
									</view>
									<view style="display: flex;justify-content: space-between;align-items: center;">
										<view class="money">
											<u-text size="38rpx" blod :text="'¥'+0" type="error">
											</u-text>
											<u-tag class="tag" style="display: inline-block;" shape="circle"
												:text="scenicDetails.isEnable?'可退':'不可退'" size="mini" type="error">
											</u-tag>
										</view>
										<view class="buySubmit">
											<!-- <u-button size="large" type="primary" text="预约" @click="buy(scenicDetails)">
															</u-button> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-text style="padding:30rpx 0;" bold type="info" text="门票预约"></u-text>
			</view>
			<view class="_abbr">
				<helang-checkbox ref="checkbox"></helang-checkbox>
			</view>
			<u-text style="padding: 30rpx" bold type="info" text="门票场次"></u-text>
			<view class="_abbr1">
				<helang-checkbox ref="checkbox1"></helang-checkbox>
				<view style="display: flex;padding: 30rpx 0;">
					<u-text bold type="info" text="游客信息"></u-text>
					<view>
						<u-button size="mini" type="primary" shape="circle" text="添加出行人" @click="show = true">
						</u-button>
					</view>
				</view>
				<!-- 游客信息 -->
				<view class="touristInfo">
					<view>添加了<text style="color: #FC2530;">{{number}}</text>位出行人</view>
					<view class="centerBox" v-for="(item,index) in ykList" :key="index">
						<view class="centerBox_body" :style="{'background':item.click?'#fff4f9':''}"
							@click="clickTourist(index)">
							<view class="centerBox_item"><text>{{item.partnerName}}</text></view>
							<view class="centerBox_item1">
								<!-- <u-text size="28rpx" :text="item.text"></u-text> -->
								<u-text size="28rpx"
									:text="'身份证:'+item.partnerCard.substring(0,6)+'*****'+item.partnerCard.substring(item.partnerCard.length,item.partnerCard.length-3)">
								</u-text>
								<u-text size="28rpx"
									:text="'手机号:'+item.partnerMobile.substring(0,3)+'*****'+item.partnerMobile.substring(item.partnerMobile.length,item.partnerMobile.length-3)">
								</u-text>
							</view>
						</view>
						<u-divider v-if="index+1 != ykList.length"></u-divider>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部提交订单 -->
		<view class="footer">
			<view class="footer_box">
				<view class="footer_item">
					共<text>{{number}}</text>张门票,合计：<text>￥0</text>元
				</view>
				<view>
					<u-button type="primary" shape="circle" text="提交订单" @click="jump"></u-button>
				</view>
			</view>

		</view>
		<u-modal :show="show" @confirm="confirm" ref="uModal" >
			<u-form labelPosition="left" :model="modelValue" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="partnerName">
					<u-input v-model="modelValue.partnerName" placeholder="请输入姓名" border="bottom"></u-input>
				</u-form-item>
				<u-form-item label="电话" prop="partnerMobile">
					<u-input v-model="modelValue.partnerMobile" placeholder="请输入电话" border="bottom" type="number"
						clearable></u-input>
				</u-form-item>
				<u-form-item label="身份证号" prop="partnerCard">
					<u-input v-model="modelValue.partnerCard" placeholder="请输入身份证号码" border="bottom" type="number"
						clearable></u-input>
				</u-form-item>
			</u-form>
		</u-modal>
		<u-notify ref="notify"></u-notify>
	</view>
</template>

<script>
	import helangCheckbox from "@/components/helang-checkbox/helang-checkbox.vue"
	export default {
		components: {
			"helang-checkbox": helangCheckbox
		},
		data() {
			return {
				number: 0,
				scenicId: '',
				show: false,
				scenicDetails: {},
				submitValue: {},
				modelValue: {
					partnerName:'',
					partnerMobile:'',
					partnerCard:'',
				},
				ykList: [],
				gpValue: 0,
				rules: {
					partnerName: {
						type: 'string',
						required: true,
						message: '姓名必填',
						trigger: ['change','blur']
					},
					// 字段名称
					partnerMobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					partnerCard: [{
							required: true,
							message: '请输入身份证号码',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.idCard(value);
							},
							message: '身份证号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				mobile:'',
			}
		},
		onLoad(option) {
			this.scenicId = option.scenicId
			this.scenicDetails = JSON.parse(decodeURIComponent(option.item))
		},
		mounted() {
			uni.getStorage({
				key: 'userInfo',
				success:  (res) =>{
					this.modelValue.userId = res.data.id
					this.mobile = res.data.mobile
				}
			})
			this.getData(this.scenicId)
			this.getUser(this.mobile)
			/* 设置 单选框 */
			this.$refs.checkbox.set({
				type: 'radio', // 类型：单选框
				index: 1, // 默认选中的项
				column: 3, // 分列
				list: this.getDate()
			});
		},
		methods: {
			getUser(mobile){
				this.$api({
					url: '/customer/getPartner/' + mobile,
					method: 'get'
				}).then((res) => {
					this.ykList = res.data.map((r)=>{
						r.click = false
						return r
					})
				})
			},
			getData(id) {
				this.$api({
					url: '/business/getTicketTime/' + id,
					method: 'get'
				}).then((res) => {
					const newArray = res.data.map(({
						timePeriod,
						id: text1
					}) => ({
						text: timePeriod,
						text1
					}));
					this.$refs.checkbox1.set({
						type: 'radio', // 类型：单选框
						index: 1, // 默认选中的项
						column: 3, // 分列
						list: newArray
					});
				})
			},
			confirm() {
				this.$refs.uForm.validate().then(res => {
								this.$api({
									url: '/customer/addPartner',
									method: 'post',
									data:this.modelValue
								}).then((res) => {
									if(res.code==200){
										this.$refs.notify.primary(res.message)
										this.show = false
										this.getUser(this.mobile)
									}
								})
							}).catch(errors => {
								uni.$u.toast('校验失败')
							})
			},
			getDate() {
				// 获取今天日期
				let today = new Date();

				// 获取明天日期
				let tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000); // 在今天日期上加上 24 小时（单位为毫秒）即为明天日期

				// 获取后天日期
				let dayAfterTomorrow = new Date(today.getTime() + 2 * 24 * 60 * 60 * 1000); // 在今天日期上加上 48 小时即为后天日期

				// 格式化日期字符串
				let formatDate = (date) => {
					let month = date.getMonth() + 1; // 获取月份，由于 getMonth 返回的是 0-11，因此要加上 1
					let day = date.getDate(); // 获取日期
					return `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
				};
				return [{
					text: '今天',
					text1: formatDate(today)
				}, {
					text: '明天',
					text1: formatDate(tomorrow)
				}, {
					text: '后天',
					text1: formatDate(dayAfterTomorrow)
				}]
			},
			clickTourist(e) {
				if (this.ykList[e].click) {
					this.number--;
				} else {
					this.number++;
				}
				this.ykList[e].click = !this.ykList[e].click;
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			jump() {

				if (this.number == 0) {
					this.$refs.notify.warning('至少选择一名出行人')
				} else {
					this.submitValue.ticketTypeId = this.scenicDetails.id
					this.submitValue.ticketTypeName = this.scenicDetails.ticketName
					this.submitValue.scenicId = this.scenicId
					this.submitValue.bookedDate = this.addYear(this.$refs.checkbox.get().text1)
					this.submitValue.periodId = this.$refs.checkbox1.get().text1
					this.submitValue.timePeriod = this.$refs.checkbox1.get().text
					this.submitValue.userMobile = this.mobile
					let ykId = []
					for (let s of this.ykList) {
						if(s.click){
							ykId.push(s.id)
						}
					}
					this.submitValue.patternId = ykId.join(',')
					this.$api({
						url: '/customer/addOrder',
						method: 'post',
						data: this.submitValue
					}).then((res) => {
						if (res.code == 200) {
							let item = {}
							item = this.submitValue
							item.number = this.number
							item.ticketImg = this.scenicDetails.ticketImg
							item.ticketTag = this.scenicDetails.ticketTag
							item.isEnable = this.scenicDetails.isEnable
							item.id = res.data
							uni.navigateTo({
								url: '/pages/index/scenicBuy/buyDetails/index?item=' + encodeURIComponent(JSON.stringify(
									item))
							})
						}else{
							this.$refs.notify.warning(res.message)
						}
					})

				}


			},
			addYear(time) {
				// 获取当前的年份
				let year = new Date().getFullYear();
				// 将日期字符串转为 Date 对象
				let date = new Date(`${year}- ${time}`);
				if (date < new Date()) { // 如果当前日期已经过了，说明给定日期在下一年
					year += 1;
					date.setFullYear(year);
				}
				// 格式化日期
				let formatDate = (date) => {
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
					return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}` + ' ' +
						'00:00:00';
				};
				// 输出结果
				return formatDate(date)
			},
			back() {
				uni.navigateBack({
					delta: 2
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tag--mini[data-v-3732d7af] {
		padding: 0 30rpx;
	}

	.content {
		.bg {
			padding: 10rpx 30rpx;
			background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
			--tw-gradient-from: #FC2530;
			--tw-gradient-stops: var(--tw-gradient-from), #FC2530, var(--tw-gradient-to, rgba(185, 28, 28, 0));

			.ticket {
				--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
				box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
				border-radius: 20rpx;
				background-color: #fff;
				padding: 30rpx;

				.list {

					.item_body {
						display: flex;

						.body_right {
							// width: 100%;
							padding: 0 25rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

						}
					}
				}
			}
		}

		._abbr {
			padding: 0 30rpx;
		}

		._abbr1 {
			padding: 0 30rpx 200rpx 30rpx;
		}


		.centerBox {
			width: 100%;

			margin-top: 10px;

			&_body {
				display: flex;
				flex-direction: row;
			}

			&_item {
				width: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			&_item1 {
				width: 60%;
				text-align: left;
				padding-left: 50rpx;
			}

			&_item2 {
				width: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.footer {
			background-color: #fff;
			position: fixed;
			width: 100%;
			// ios底部安全距离-bottom
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);


			&_box {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			&_item {
				// padding: 20rpx 30rpx;
			}
		}
	}
</style>
